<!DOCTYPE html>
<html>
<head>
    {include file='public/meta'/}
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/Statistics.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/member/css/member-info.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/setcardsurvey.css"/>



    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/bootstrap-table/bootstrap-table.css"/>
    <script src="__STATIC_URL__/static/bootstrap-table/bootstrap-table.js"></script>
    <script src="__STATIC_URL__/static/bootstrap-table/bootstrap-table-zh-CN.js"></script>

</head>
<body>
{include file='public/header'/}
<section id="content">
    <!------------------导航-------------------------->
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content" style="background:none;">
        <div class="page-heading mgl15 mgr15">
            <ol class="breadcrumb">
                <li>当前位置是&nbsp;:</li>
                <li><a href="{:url('cardus/carduslist')}">会员卡管理</a></li>
                <li>
                    <a href="javascript:history.back();">会员卡统计</a>
                </li>
                <li class="active" style="color: #02b87f;"> 会员卡概览数据</li>
            </ol>
        </div>
        <div style="background:#fff;">
            <div class="row" style="    margin-bottom: 20px;">
                <div class="col-lg-12">
                    <ul class="nav nav-tabs tabs" style="width: 100%;">
                        <li class="tab active">
                            <a href="{:url('report/cardsurvey')}" class="active">概览数据</a>
                        </li>
                        <li class="tab ">
                            <a href="{:url('report/reportcardmemberlist')}">消费数据</a>
                        </li>

                        <li class="tab ">
                            <a href="{:url('report/cardreglist')}">充值数据</a>
                        </li>
                        <li class="tab ">
                            <a href="{:url('report/cardbonuslist')}">积分数据</a>
                        </li>
                        <li class="tab ">
                            <a href="{:url('report/carddellist')}">退卡数据</a>
                        </li>
                  
                        <li class="tab"></li>
                    </ul>
                </div>
            </div>
            <div class="alert alert-success" style="background-color: rgba(204, 228, 223, 0.3);margin: 5px 10px 5px 10px;">
                <strong>
                    <i class="ti-info-alt"></i>
                </strong>
                会员卡管理中，数据统计及显示只显示出一个月之内的，如需其它日期内数据，请选择时间段进行查找。
            </div>
            <div class="panel panel-default mgl15 mgr15">
                <div class="panel-heading">
                    <h5 class="panel-title">
                        消费数据

                    </h5>
                </div>
                <div class="panel-body">
                    <div class="fenxilist clearfix">

                        <div class="col-sm-3">
                            <div class="card-box widget-box-1 bg-white">
                                <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right"
                                   data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                </i>
                                <h4 class="text-dark">
                                    充值总额</h4>
                                <h2 class="text-pink text-center">

                                    ¥ <span>{$info['rec_fee']}元
                                  </span>
                                </h2>

                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="card-box widget-box-1 bg-white">
                                <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right"
                                   data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                </i>
                                <h4 class="text-dark">消费总金额</h4>
                                <h2 class="text-warning text-center">

                                    ¥ {$info['con_fee']}<span>元
                                  </span>
                                </h2>

                            </div>
                        </div>

                        <div class="col-sm-3">
                            <div class="card-box widget-box-1 bg-white">
                                <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right"
                                   data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                </i>
                                <h4 class="text-dark">剩余总金额</h4>
                                <h2 class="text-primary text-center">

                                    ¥  {$info['sur_fee']}<span>元
                                  </span>
                                </h2>

                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="card-box widget-box-1 bg-white">
                                <i class="ion-information-circled glyphicon glyphicon-info-sign	 pull-right"
                                   data-toggle="tooltip" data-placement="bottom" title data-original-title="订单的">
                                </i>
                                <h4 class="text-dark">剩余总积分</h4>
                                <h2 class="text-info text-center">
                                    <span>{$info['sur_bonus']}</span>
                                </h2>

                            </div>
                        </div>


                    </div>

                </div>
            </div>
            <ul id="myTab" class="nav nav-tabs com-lower-tab">
                <li class="com-lower-tab-item active">
                    <a href="#day" data-toggle="tab">
                        日报表
                    </a>
                </li>
                <li class="com-lower-tab-item">
                    <a href="#mon" data-toggle="tab">
                        月报表
                    </a>
                </li>
                <li class="com-lower-tab-item">
                    <a href="#merchant" data-toggle="tab">
                        门店报表
                    </a>
                </li>

            </ul>
            <div class="panel panel-default panel-search mgl15 mgr15">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-search pull-left"
                                                  style="margin-right: 10px;"></span>筛选</h3>
                </div>
                <div class="panel-body">
                    <div class="col-sm-6 col-md-6 col-lg-4" id="machdiv">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">门店：</label>
                            <div class="col-sm-9 binput">
                                <input type="hidden" name="type" id="type" value="search">

                                <input type="hidden" name="mchid" id="mach" value="">
                                <input class="form-control" id="mac" style=" display: inline-block;"
                                       value="全部门店"
                                       data-target="#myModal3" data-toggle="modal"/>

                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-7 col-lg-6" id="datediv1">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">选择日期：</label>
                            <div class="col-sm-9 binput">
                                <div class="">
                                    <input name="search_date" type="text" value="" readonly="readonly"
                                           id="search_date" placeholder="请选择日期" class="form-control">

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-7 col-lg-6" id="datediv2" style="display: none">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">选择月份：</label>
                            <div class="col-sm-9 binput">
                                <div class="">
                                    <input name="search_date" type="text" value="" readonly="readonly"
                                           id="search_date2" placeholder="请选择月份" class="form-control">

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="panel-footer">
                    <a href="javascript:;" class="btn btn-primary" onclick="searchform()">查找</a>
                    <!--<a href="javascript:;" class="btn btn-default" onclick="clearform()">清空</a>-->
                </div>
            </div>
            <div id="myTabContent" class="tab-content">

                <div class="tab-pane fade in active" id="day">

                    <div class="panel mgl15 mgr15">
                        <div class="panel-heading addCharts" style="background:#ededed;">数据明细


                            <a href="javascript:;" onclick="load('day');" class="btn btn-info"
                               style="float: right;  margin-top: -7px;">点击下载</a>

                        </div>
                        <div class="panel-body">
                            <table class="table table-bordered table-striped" id="tablelist">

                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade  " id="mon">
                    <div class="panel mgl15 mgr15">
                        <div class="panel-heading addCharts" style="background:#ededed;">数据明细


                            <a href="javascript:;" onclick="load('mon');" class="btn btn-info"
                               style="float: right;  margin-top: -7px;">点击下载</a>

                        </div>
                        <div class="panel-body">
                            <table class="table table-bordered table-striped" id="tablelist1">

                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade  " id="merchant">
                    <div class="panel mgl15 mgr15">
                        <div class="panel-heading addCharts" style="background:#ededed;">数据明细


                            <a href="javascript:;" onclick="load('mach');" class="btn btn-info"
                               style="float: right;  margin-top: -7px;">点击下载</a>

                        </div>
                        <div class="panel-body">
                            <table class="table table-bordered table-striped" id="tablelist2">

                            </table>
                        </div>
                    </div>
                </div>
            </div>
            {include file='public/footer'/}
        </div>
    </div>
</section>
{include file="public/machmodal" /}
</body>

<script src="__STATIC_URL__/static/laydate/laydate.js"></script>
<script src="/wntable.js?v=1"></script>
<script>
    function load(type) {
        if (type == "mon") {
            search_date = $("#search_date2").val();
        } else {
            search_date = $('#search_date').val();
        }
        mchid = $("#mach").val();//后台请求传的查询参数
        $.ajax({
            url: "{:url()}",
            data: {
                sch_type:type,
                mchid:mchid,
                type:"out_excel",
                search_date:search_date
            },
            dataType: "json",
            async: false,
            type: "post",
            success: function (res) {
                // console.log(res);
                window.location.href = res;
            }
        })


    }

    var tablelistid = "tablelist";

    //下载报表

    $(function () {
        var type = "cardsurvery";
        var url = "{:url('reporttest/cardsurvey')}";
        getcolumn(type, url, "tablelist")

    });


    //搜索
    function searchform() {
        $("#" + tablelistid).bootstrapTable('refresh');
    }

</script>
<script>
    laydate.render({
        elem: '#search_date',
        type: 'date',
        range: true,
        change: function (value, date, date2, data3) {
            var s = value.split(" - ");
            var startdate = new Date(s[0]).getTime();
            var enddate = new Date(s[1]).getTime();
            var ldate = Math.floor((enddate - startdate) / (24 * 3600 * 1000));
            if (ldate > 31) {
                layer.alert("日期区间不能大于31天");
                $("#search_date").val("");
            }
        }
    });
    laydate.render({
        elem: '#search_date2',
        type: 'month',
        range: true,
        change: function (value, date, date2, data3) {

        }
    });
</script>
<script type="text/javascript">
    $(function () {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            // 获取已激活的标签页的名称
            var activeTab = $(e.target).attr('href');
            if (activeTab == "#day") {
                $('#machdiv').show();
                $('#datediv1').show();
                $('#datediv2').hide();
                tablelistid = "tablelist";
                var type = "cardsurvery";
                var url = "{:url('reporttest/cardsurvey')}";
                getcolumn(type, url, "tablelist");
            }
            else if (activeTab == "#mon") {
                $('#machdiv').show();
                $('#datediv1').hide();
                $('#datediv2').show();
                tablelistid = "tablelist1";
                var type = "cardsurvery_mon";
                var url = "{:url('reporttest/cardsurvey')}";
                getcolumn(type, url, "tablelist1");
            }
            else if (activeTab == "#merchant") {
                $('#machdiv').hide();
                $('#datediv1').show();
                $('#datediv2').hide();
                tablelistid = "tablelist2";
                var type = "cardsurvery_mch";
                var url = "{:url('reporttest/cardsurvey')}";
                getcolumn(type, url, "tablelist2");
            }

        });
        $(".checkAll").click(function () {
            if (this.checked) {
                $(".checkSingel").prop("checked", true);
            } else {
                $(".checkSingel").prop("checked", false);
            }

        });
    });

    //筛选条件
    function filtertj() {
        $("#payform").submit();
    };

    //筛选条件
    function cleartj() {
        $(".form-virtical input").val("");
        $("select").val("");
    };
</script>
<script>
    /*查看会员信息*/
    function show(obj, id) {
        $("#cid").attr("data-id", id);
        $("#head_imgUrl").attr("src", "");


    }

    $(".sidenav-overlay").click(function () {

        $(".right-bar").removeClass("open");
        $(".sidenav-overlay").removeClass("overlay-active");
        // location.reload();
    })
</script>
</html>
